<template>
	<div class="v-view">
		<Breadcrumb moduleName="用户分群">
			<Shortcuts slot="content" curPage="usergroups" @handleRefresh="handleRefresh"></Shortcuts>
		</Breadcrumb>
		<div class="box">
			<!-- <div class="screen">
				<div class="analysis">
					<h3>筛选面板内容部分</h3>
				</div>
				<div class="box-btn">
					<a-button type="primary" class="btn">保存报表</a-button>
					<a-button type="primary" class="btn">查询</a-button>
				</div>
			</div> -->
			<div class="data-view">
				<div class="view-wrap">
					<!-- <div class="view-header">
						<a-dropdown>
							<a-menu slot="overlay" @click="handleMenuClick">
								<a-menu-item key="ConditionGroup">新建条件分群</a-menu-item>
								<a-menu-item key="UploadID">上传ID分群</a-menu-item>
								<a-menu-item key="LookAlive">lookalike分群</a-menu-item>
							</a-menu>
							<a-button style="margin-left: 8px" type="primary">
								<a-icon type="plus" />
								新建分群
							</a-button>
						</a-dropdown>
					</div> -->
					<div class="view-body">
						<div class="condition">
							<a-form-model :model="form" layout="inline">
								<a-form-model-item label="">
									<a-input
										v-model="form.name"
										placeholder="请输入分群名称"
										class="input-leng-l"
										@keydown.enter="search"
									/>
								</a-form-model-item>
								<a-form-model-item label="分群类型">
									<a-select
										v-model="form.crowdType"
										placeholder="请选择"
										class="select-leng-l"
										@select="search"
									>
										<a-select-option value="">全部</a-select-option>
										<a-select-option :value="0">条件分群</a-select-option>
										<a-select-option :value="1">上传ID</a-select-option>
										<a-select-option :value="2">lookalike分群</a-select-option>
										<a-select-option :value="3">分析结果保存</a-select-option>
									</a-select>
								</a-form-model-item>
								<a-form-model-item label="更新方式">
									<a-select
										v-model="form.updateType"
										placeholder="请选择"
										class="select-leng-l"
										@select="search"
									>
										<a-select-option value="">全部</a-select-option>
										<a-select-option :value="1">自动</a-select-option>
										<a-select-option :value="2">手动</a-select-option>
									</a-select>
								</a-form-model-item>
								<a-form-model-item>
									<!-- <a-button type="primary" class="btn" @click="search">查询</a-button> -->
									<a-dropdown>
										<a-menu slot="overlay" @click="handleMenuClick">
											<a-menu-item key="ConditionGroup">新建条件分群</a-menu-item>
											<a-menu-item key="UploadID">上传ID分群</a-menu-item>
											<a-menu-item key="LookAlive">lookalike分群</a-menu-item>
										</a-menu>
										<a-button style="margin-left: 8px" type="primary">
											<!-- <a-icon type="plus" /> -->
											新建分群
										</a-button>
									</a-dropdown>
								</a-form-model-item>
							</a-form-model>
						</div>
						<div class="content">
							<a-table
								row-key="id"
								:columns="columns"
								:pagination="false"
								:data-source="tableData"
								:loading="loading"
							>
								<template slot="crowdType" slot-scope="text">
									{{ crowdTypeMap[text].name }}
								</template>
								<template slot="updateType" slot-scope="text">
									{{ text == 1 ? '自动' : '手动' }}
								</template>
								<template slot="updateTime" slot-scope="text">
									{{ text }}
								</template>
								<template slot="userCount" slot-scope="text">
									{{ text ? text : 0 }}
								</template>
								<template slot="action" slot-scope="text, record">
									<div class="row-action">
										<span
											:class="record.crowdType == 'analyResult' ? 'not-allow' : ''"
											@click="operateRow('check', record)"
										>
											查看
										</span>
										<span
											:class="record.crowdType == 'analyResult' ? 'not-allow' : ''"
											@click="operateRow('edit', record)"
										>
											编辑
										</span>

										<span @click="download(record)">下载</span>

										<span
											:class="record.crowdType !== 'condition' ? 'not-allow' : ''"
											@click="update(record)"
										>
											更新
										</span>
										<a-popconfirm
											title="确定删除?"
											ok-text="是"
											cancel-text="否"
											@confirm="del(record)"
										>
											<span>删除</span>
										</a-popconfirm>
									</div>
								</template>
							</a-table>
							<div class="pagination">
								<a-pagination
									v-model="pagination.current"
									:show-total="total => `共 ${total} 条记录`"
									:page-size.sync="pagination.pageSize"
									:pageSizeOptions="['10', '20', '50', '100']"
									:total="pagination.total"
									show-size-changer
									show-quick-jumper
									@change="handleTableChange"
									@showSizeChange="onShowSizeChange"
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a-drawer
			:title="drawerTitle"
			placement="right"
			closable
			:visible="drawerVisible"
			:width="drawerWidth"
			@close="onClose"
		>
			<component
				:is="menuKey"
				v-if="drawerVisible"
				:userCrowdId="userCrowdId"
				:operateType="operateType"
				@handleRefresh="handleRefresh"
				@close="onClose"
			/>
		</a-drawer>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
import Shortcuts from '@/layout/components/Breadcrumb/Shortcuts.vue'
import ConditionGroup from './componets/conditiongroup/ConditionGroup.vue'
import { getUserCrowdList, crowdDownload, crowdCalc, userCrowdDel } from '@/api/userGroup'
import UploadID from './componets/uploadid/UploadID.vue'
import LookAlive from './componets/lookalive/LookAlive.vue'
import moment from 'moment'
const columns = [
	{
		title: '分群名称',
		dataIndex: 'crowdName',
		key: 'crowdName'
	},
	{
		title: '显示名称',
		dataIndex: 'showName',
		key: 'showName'
	},

	// {
	// 	title: '创建人',
	// 	dataIndex: 'createUser',
	// 	key: 'createUser'
	// },
	{
		title: '分群类型',
		dataIndex: 'crowdType',
		key: 'crowdType',
		scopedSlots: { customRender: 'crowdType' }
	},
	{
		title: '更新方式',
		dataIndex: 'updateType',
		key: 'updateType',
		scopedSlots: { customRender: 'updateType' }
	},
	{
		title: '数据更新时间',
		dataIndex: 'updateTime',
		key: 'updateTime',
		scopedSlots: { customRender: 'updateTime' }
	},
	{
		title: '用户群人数',
		dataIndex: 'userCount',
		key: 'userCount',
		scopedSlots: { customRender: 'userCount' }
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		scopedSlots: { customRender: 'action' }
	}
]
const titleMap = {
	create: '新建',
	check: '查看',
	edit: '编辑'
}

const compNameMap: any = {
	LookAlive: 'lookalike分群',
	ConditionGroup: '条件分群',
	UploadID: '上传ID'
}

@Component({
	name: 'UserGroup',
	components: {
		Breadcrumb,
		Shortcuts,
		ConditionGroup,
		UploadID,
		LookAlive
	},
	filters: {
		format(time: any) {
			if (!time) {
				return ''
			}
			return moment(time).format('YYYY年MM月DD日  hh:mm:ss')
		}
	}
})
export default class UserGroup extends Vue {
	@Prop() private msg!: string
	menuKey = 'ConditionGroup'
	private form = {
		crowdType: '',
		name: '',
		updateType: ''
	}
	private loading = false
	pagination = {
		current: 1,
		pageSize: 10,
		total: 0
	}
	private size = 10
	private total = 0
	private tableData: Array<any> = []
	private columns: Array<any> = columns
	private drawerVisible = false
    
	operateType: 'check' | 'edit' | 'create' = 'create'
	userCrowdId = ''
	crowdTypeMap: any = {
		lookalike: { name: 'lookalike分群', component: 'LookAlive' },
		condition: { name: '条件分群', component: 'ConditionGroup' },
		idUpload: { name: '上传ID', component: 'UploadID' },
		analyResult: { name: '分析结果保存', component: '' }
	}
	get drawerTitle() {
		return titleMap[this.operateType] + compNameMap[this.menuKey]
	}
	get drawerWidth(){
       return  this.menuKey == 'ConditionGroup' ? 1000 : 700
	}
	created() {
		this.getList()
	}
	handleMenuClick(e: any) {
		const { key } = e
		this.menuKey = key
		this.operateType = 'create'
		this.drawerVisible = true
	}
	onClose() {
		this.drawerVisible = false
	}
	search() {
		this.pagination.current = 1
		this.getList()
	}
	getList() {
		const projectId = localStorage.getItem('productId')
		const params = {
			createUser: '',
			current: this.pagination.current,
			display: 0,
			projectId,
			size: this.pagination.pageSize,
			status: 0,
			...this.form
		}
		this.loading = true
		getUserCrowdList(params)
			.then(res => {
				const {
					data: { total, rows }
				} = res
				this.pagination.total = Number(total)
				this.tableData = rows
			})
			.finally(() => {
				this.loading = false
			})
	}
	handleTableChange(currnt: any) {
		this.pagination.current = Number(currnt)
		this.getList()
	}
	onShowSizeChange(current: any, pageSize: any) {
		this.pagination.pageSize = Number(pageSize)
		this.getList()
	}
	operateRow(type: 'check' | 'edit', record: any) {
		this.operateType = type
		const { id, crowdType } = record
		this.userCrowdId = id
		this.menuKey = this.crowdTypeMap[crowdType].component
		this.drawerVisible = true
	}
	download(record: any) {
		const { projectId, id } = record
		crowdDownload(id, projectId).then((res: any) => {
			if (!res) {
				this.$message.warning('分群计算结果，无法下载！')
			}
			let text = res
			let a = document.createElement('a')
			a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
			a.download = ''
			document.body.appendChild(a)
			a.click()
			document.body.removeChild(a)
		})
	}
	update(record: any) {
		const { id } = record
		const params = {
			id
		}
		crowdCalc(params).then(res => {
			const { code, message } = res
			if (code == 200) {
				this.$notify.success({
					message: `更新成功！`
				})
				this.search()
			} else {
				this.$notify.warning({
					message
				})
			}
		})
	}
	del(record: any) {
		const { id } = record
		userCrowdDel(id).then(() => {
			this.$notify.success({
				message: `删除成功！`
			})
			this.search()
		})
	}
	private handleRefresh() {
		this.getList()
	}
}
</script>

<style lang="scss" scoped>
.view-wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.view-header {
	padding: 8px;
	background: #fff;
}
.view-body {
	flex: 1;
	margin-top: 8px;
	background: #fff;
	.condition {
		padding: 8px;
		border-bottom: 2px solid $border;
		display: flex;
		justify-content: flex-end;
	}
	.content {
		padding: 8px;
	}
}
.row-action {
	width: 100%;
	display: flex;
	justify-content: space-between;
	color: $blue;
	& > span {
		cursor: pointer;
	}
	.not-allow {
		opacity: 0.6;
		pointer-events: none;
	}
}
.pagination {
	padding: 12px;
	display: flex;
	justify-content: flex-end;
}
</style>
